{% extends "base.html" %}

{% block main %}

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet">
<div class="path">

    <div class="card mb-2 fm-upload-wrapper <?php echo fm_get_theme(); ?>">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#fileUploader" data-target="#fileUploader"><i class="fa fa-arrow-circle-o-up"></i> Upload Files</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <p class="card-text">
                <a href="{{url_for('main', path=des_folder)}}" class="float-right"><i class="fa fa-chevron-circle-left go-back"></i> Back</a>
                Destination Folder: /{{des_folder}}
            </p>

            <form action="{{url_for('upload_handler')}}" class="dropzone card-tabs-container" id="fileUploader" enctype="multipart/form-data">
                <input type="hidden" name="to" value="{{des_folder}}">
                <input type="hidden" name="fullpath" id="fullpath" value="{{des_folder}}">
                <div class="fallback">
                    <input name="file" type="file" multiple/>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<script>
    Dropzone.options.fileUploader = {
        chunking: true,
        chunkSize: 1024*1024*4,
        forceChunking: true,
        retryChunks: true,
        retryChunksLimit: 5,
        parallelUploads: 1, // does not support more than 1!
        timeout: 120000,
        init: function () {
            this.on("sending", function (file, xhr, formData) {
                let _path = (file.fullPath) ? file.fullPath : file.name;
                document.getElementById("fullpath").value = _path;
                xhr.ontimeout = (function() {
                    toast('Error: Server Timeout');
                });
            }).on("success", function (res) {
                let _response = JSON.parse(res.xhr.response);

                if(_response.status == "error") {
                    toast(_response.info);
                }

            }).on("error", function(file, response) {
                toast(response);
            });
        }
    }
</script>

{% endblock %}